<!DOCTYPE html>
<html lang="es-AR" ng-app="fulboApp">
<head>
  <meta charset="utf-8">
  
  <!-- Open Graph meta tags -->
  <meta property="fb:app_id" content="1475155856090225" />
  <meta property="og:site_name" content="Futzapp"/>
  <meta property="og:url" content="http://www.futzapp.com"/>
  <meta property="og:title" content="Jugate un Fulbo"/>
  <meta property="og:image" content="http://www.futzapp.com/images/field.jpg"/>
  <meta property="og:description" content="Ya reservaste cancha y te faltan jugadores? Armar un partido de fútbol entre amigos nunca fue tan fácil"/>
  
  
  <title>Fulbo</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/animations.css">
  <link rel="stylesheet" href="css/font-awesome.css">

  <script src="js/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="node_modules/moment/min/moment-with-locales.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
  <script src="js/angular.js"></script>
  <script src='http://maps.googleapis.com/maps/api/js?key=AIzaSyAqlMLa2hKGgZ0qgiO-5Iwe6SU--JDADn4&sensor=FALSE'></script>

  <script src="js/angular-animate/angular-animate.js"></script>
  <script src="js/angular-route/angular-route.js"></script>
  <script src="js/angular-resource/angular-resource.js"></script>
  <script src="bower_components/ng-flow/dist/ng-flow-standalone.min.js"></script>
  
  <script src="js/app.js"></script>
  <script src="js/animations.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/services.js"></script>
  <script src="js/directives.js"></script>
  <script src="js/helpers.js"></script>
</head>
<body>
	<div id="fb-root"></div>
	<div id="header" ng-controller="BaseController" ng-class="{true:'offline', false:'online'}[$root.user == null]">
		<div ng-if="$root.user == null" class="headerButtons" id="leftHeaderButtons">
	    	&nbsp;
		</div>
		<div ng-if="$root.user != null" class="headerButtons" id="leftHeaderButtons">
	    	<div ng-class="{groups:'active'}[$root.activePage]" ng-click="openGroupsView()"><i class="fa fa-group gray"></i> Amigos</div>
	    	<div ng-class="{matches:'active'}[$root.activePage]" ng-click="openMatchesView()"><i class="fa fa-circle-o gray"></i> Partidos</div>
		</div>
		
		<div id="title" ng-click="openHomeView()">
			Fulbo
		</div>	
		
		<div ng-if="$root.user == null" class="headerButtons" id="rightHeaderButtons">
			<div id="registerButton" class="button button-blue big" ng-click="login()">
				<div><span class="glyphicon glyphicon-plus lightBlue"></span> conectar con facebook</div>
			</div>
		</div>
		<div ng-if="$root.user != null" class="headerButtons" id="rightHeaderButtons">
			<div id="headerNewMatch" data-toggle="modal" data-target="#newMatchModal"><span class="glyphicon glyphicon-plus yellow"></span> Nuevo Fulbo</div>
			<div class="img-container xs profile" ng-click="openProfileView()"><img src="{{$root.user.photo_url}}" />Log-out</div>
		</div>
	</div>
	<div class="view-container">
		<div ng-view class="view-frame"></div>
	</div>
	
	<div id="loaderDiv">
	    <img src="images/ajax-loader.gif" class="ajax-loader"/>
	</div>
	
	<div id="newMatchModal" class="modal fade">
  		<div class="modal-dialog modal-dialog-center h600">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      			</div>
      			<div class="modal-body">
        			<div class="row no-bottom-margin">
        				<div class="col-md-4">
							<i class="fa fa-futbol-o fa-4x"></i>
							<h3>Jugadores</h3>
							<select id="matchModalType" name="txt_inc_Status" class="form-control input-lg" required>
								<option selected disabled>
									Número de jugadores
								</option>
							    <option ng-repeat="matchType in $root.matchTypes" value="{{matchType.id}}">
							    	{{matchType.name}}
								</option>
							</select>
							<p>Elegí que tipo de fulbito<br/>querés armar.</p>
						</div>
						<div class="col-md-4">
							<i class="fa fa-group fa-4x"></i>
							<h3>Sede</h3>
							<select id="matchModalField" name="txt_inc_Status" class="form-control input-lg" required>
								<option selected disabled>
									Dónde se juega
								</option>
							    <option ng-repeat="field in $root.fields" value="{{field.id}}">
							    	{{field.name}}
								</option>
							</select>
							<p>Completá con datos para que los<br/>jugadores lleguen.</p>
						</div>
						<div id="time" class="col-md-4">
							<i class="fa fa-clock-o fa-4x"></i>
							<h3>Fecha y Horario</h3>
							<div id="timeSelectors">
								<input id="matchModalDate" type="text"
				                   class="form-control input-lg"
				                   data-date-time-picker
				                   data-language="{{es}}"
				                   data-pick12HourFormat="false"
				                   data-date-format="DD/MM/YYYY"
				                   data-date-pickTime="false"
				                   data-use-current="{{false}}"
				                   placeholder="Elegí el día" 
				                    />
								<input id="matchModalHour" type="time" class="form-control input-lg" placeholder="Horario">
							</div>
							<p>Antes de cerrar la fecha y hora,<br/>confirmá con tu cancha.</p>
						</div>
					</div>
					<div class="row no-bottom-margin">
						<div class="col-md-12 text-center">
							<div id="createMatchButton" class="button button-green big" ng-click="$root.createMatchModal()">
								<div><span class="glyphicon glyphicon-plus darkYellow"></span> armar fulbo</div>
							</div>
						</div>
					</div>
      			</div>
    		</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<div id="alertModal" class="modal fade">
  		<div class="modal-dialog modal-dialog-center h300">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        			<h4 class="modal-title">Modal title</h4>
      			</div>
      			<div class="modal-body">
      				<div class="row">
        				<div class="col-md-12">
        					<p style="padding-left: 15px;" class="message">One fine body&hellip;</p>
        				</div>
        			</div>
      			</div>
    		</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<!-- WhatsApp Button -->
	<script type="text/javascript">if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="js/whatsapp-button.js";h.appendChild(s);}</script>
</body>
</html>
